import { h } from "vue"
import { getGeometricStyle } from '../../../lib/utils'
import Wrap from "../Wrap"
export default {
  props: {
    list: {
      type: Array,
      default: ()=> []
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    handleComponentMouseDown: {
      type: Function,
      default: ()=> ()=> {}
    },
    multipleKeys: {
      type: Array,
      default: ()=> []
    },
    selectedComponent: {
      type: Object,
      default: ()=> {}
    }
  },
  render (){ // list, isEdit, options
    const {
      isEdit,
      list,
      renderComponentWrapList,
      renderComponentList 
    } = this
    if(isEdit){
      return (
        <div>{renderComponentWrapList(list)}</div>
      )
    }
    else {
      return (
        <div>{renderComponentList(list)}</div>
      )
    }
    
  },
  methods: {
    
    
    /**
     * 渲染动态组件
     * @param {Object} item 
     * @param {Function} callback
     * @returns 
     */
    renderDynaComponent(item, callback = ()=> {}){
      const {
        tag,
        props,
        element,
        id,
        class: className
      } = item
      const {
        handleValueChange
      } = this
      const isPreview = !this.isEdit
      props.isPreview = isPreview
      switch(tag){
        case "c-text":
          return (
            <c-text props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-button":
          return (
            <c-button props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-echarts":
          return (
            <c-echarts props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-table":
          return (
            <c-table props={props} onValueChange={handleValueChange} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-date-picker":
          return (
            <c-date-picker props={props} onValueChange={handleValueChange} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-range-picker":
          return (
            <c-range-picker props={props} onValueChange={handleValueChange} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-select":
          return (
            <c-select props={props} onValueChange={handleValueChange} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-web":
          return (
            <c-web props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-box":
          return (
            <c-box props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} />
          )
        case "c-tabs":
          return (
            <c-tabs props={props} onValueChange={handleValueChange} element={element} draggable={false} id={id} class={className} isPreview={isPreview} >
              {
                (props.list || []).map(tab => {
                  return (
                    <a-tab-pane key={tab.label} tab={tab.label}>
                      {callback(tab.children)}
                    </a-tab-pane>
                    
                  )
                })
              }
            </c-tabs>
          )
        case "c-custom":
          return (
            <c-custom props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} >
            </c-custom>
          )
        case "c-widget":
          return (
            <c-widget props={props} element={element} draggable={false} id={id} class={className} isPreview={isPreview} >
            </c-widget>
          )
      }
    },
    
    /**
     * 渲染有包装的组件列表
     * @param {*} list 
     * @returns 
     */
    renderComponentWrapList(list = []){
      const {
        multipleKeys,
        selectedComponent,
        handleComponentMouseDown,
        renderDynaComponent,
        renderComponentWrapList
      } = this
      return (
        list.map(item => {
          let data
          if(multipleKeys.length > 1 || selectedComponent.key !== item.key){
            data = {
              props: item.props,
              element:item,
              draggable:false,
              id: item.key,
              class:item.class,
              tag: item.tag
            }
          }
          else {
            data = {
              props: selectedComponent.props,
              element: selectedComponent,
              draggable:false,
              id: selectedComponent.key,
              class: selectedComponent.class,
              tag: item.tag
            } 
          }
          
          
          return (
            
            <Wrap
              componentClick={(...args)=> {handleComponentMouseDown(...args)}}
              defaultStyle={item.style}
              key={item.key}
              element={item}
              style={getGeometricStyle(selectedComponent.key === item.key ? selectedComponent.style : item.style)}
              isSelected={multipleKeys.includes(item.key)}>
              {
                renderDynaComponent(data, renderComponentWrapList)
              }
              
            </Wrap>
          )
        })
        
      )
      
    },
    
    /**
     * 渲染无包装的组件列表
     * @param {*} list 
     * @returns 
     */
    renderComponentList(list = []){
      return (
        list.map(item => {
          const data = {
            props: item.props,
            element:item,
            draggable:false,
            id: item.key,
            class:item.class,
            tag: item.tag
          }
          return (
            <div
              style={
                {
                  position: "absolute",
                  ...getGeometricStyle(item.style)
                }
              }>
              {
                this.renderDynaComponent(data, this.renderComponentList)
              }
              
            </div>
          )
        })
        
      )
      
    },
    handleValueChange(...args){
      this.$emit("valueChange", ...args)
    }
  },
  components: {
    Wrap
  },
  created() {
    window.getData = ()=> this.$store.state.lowCode
  }




}